<template>
  <div class="demand-detail-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <el-button @click="goBack" class="back-btn">
          <el-icon><ArrowLeft /></el-icon>
          返回需求管理
        </el-button>
        <h1 class="page-title">需求详情</h1>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="10" animated />
    </div>

    <!-- 需求详情内容 -->
    <div v-else-if="demand" class="demand-content">
      <!-- 基本信息卡片 -->
      <el-card class="info-card">
        <template #header>
          <div class="card-header">
            <span class="card-title">基本信息</span>
            <div class="status-badge">
              <el-tag :type="getStatusType(demand.demandStatus)">
                {{ getStatusText(demand.demandStatus) }}
              </el-tag>
            </div>
          </div>
        </template>
        
        <div class="info-grid">
          <div class="info-item">
            <span class="label">需求标题：</span>
            <span class="value">{{ demand.title }}</span>
          </div>
          <div class="info-item">
            <span class="label">需求类型：</span>
            <span class="value">{{ getDemandTypeText(demand.demandType) }}</span>
          </div>
          <div class="info-item">
            <span class="label">合作模式：</span>
            <span class="value">{{ demand.cooperationMode }}</span>
          </div>
          <div class="info-item">
            <span class="label">工作地点：</span>
            <span class="value">{{ demand.location }}</span>
          </div>
          <div class="info-item">
            <span class="label">薪资范围：</span>
            <span class="value">{{ demand.salaryRange }}</span>
          </div>
          <div class="info-item">
            <span class="label">有效期至：</span>
            <span class="value">{{ formatDate(demand.validityPeriod) }}</span>
          </div>
          <div class="info-item">
            <span class="label">发布时间：</span>
            <span class="value">{{ formatDate(demand.publishTime) }}</span>
          </div>
          <div class="info-item">
            <span class="label">最后更新：</span>
            <span class="value">{{ formatDate(demand.lastRefreshTime) }}</span>
          </div>
        </div>
      </el-card>

      <!-- 需求要求卡片 -->
      <el-card class="info-card">
        <template #header>
          <span class="card-title">需求要求</span>
        </template>
        
        <div class="info-grid">
          <div class="info-item full-width">
            <span class="label">目标国籍：</span>
            <span class="value">{{ demand.targetNationalities }}</span>
          </div>
          <div class="info-item full-width">
            <span class="label">语言要求：</span>
            <span class="value">{{ demand.languageRequirements }}</span>
          </div>
          <div class="info-item full-width">
            <span class="label">专业要求：</span>
            <span class="value">{{ demand.majorRequirements }}</span>
          </div>
          <div class="info-item full-width">
            <span class="label">学历要求：</span>
            <span class="value">{{ demand.degreeRequirements }}</span>
          </div>
          <div class="info-item full-width">
            <span class="label">经验要求：</span>
            <span class="value">{{ demand.experienceRequirements }}</span>
          </div>
        </div>
      </el-card>

      <!-- 详细描述卡片 -->
      <el-card class="info-card">
        <template #header>
          <span class="card-title">详细描述</span>
        </template>
        
        <div class="description-content">
          <div class="description-item">
            <h4>需求描述：</h4>
            <div class="rich-text" v-html="demand.description"></div>
          </div>
          <div class="description-item">
            <h4>需求要求：</h4>
            <div class="rich-text" v-html="demand.requirements"></div>
          </div>
        </div>
      </el-card>

      <!-- 企业信息卡片 -->
      <el-card class="info-card">
        <template #header>
          <span class="card-title">企业信息</span>
        </template>
        
        <div class="info-grid">
          <div class="info-item">
            <span class="label">企业名称：</span>
            <span class="value">{{ enterpriseInfo?.enterpriseName || '未知' }}</span>
          </div>
          <div class="info-item">
            <span class="label">认证状态：</span>
            <span class="value">
              <el-tag :type="getCertificationStatusType(enterpriseInfo?.certificationStatus)">
                {{ getCertificationStatusText(enterpriseInfo?.certificationStatus) }}
              </el-tag>
            </span>
          </div>
        </div>
      </el-card>

      <!-- 福利待遇卡片 -->
      <el-card v-if="demand.benefits" class="info-card">
        <template #header>
          <span class="card-title">福利待遇</span>
        </template>
        
        <div class="rich-text" v-html="demand.benefits"></div>
      </el-card>

      <!-- 公司优势卡片 -->
      <el-card v-if="demand.companyAdvantages" class="info-card">
        <template #header>
          <span class="card-title">公司优势</span>
        </template>
        
        <div class="rich-text" v-html="demand.companyAdvantages"></div>
      </el-card>

      <!-- 驳回信息卡片 -->
      <el-card v-if="demand.rejectionReason" class="info-card">
        <template #header>
          <span class="card-title">驳回信息</span>
        </template>
        
        <div class="rejection-content">
          <el-alert
            title="需求被驳回"
            type="error"
            :description="demand.rejectionReason"
            show-icon
          />
        </div>
      </el-card>
    </div>

    <!-- 错误状态 -->
    <div v-else-if="error" class="error-container">
      <el-result
        icon="error"
        title="加载失败"
        :sub-title="error"
      >
        <template #extra>
          <el-button type="primary" @click="loadDemandDetail">重新加载</el-button>
          <el-button @click="goBack">返回</el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { enterpriseApi } from '../../api/enterprise'

const router = useRouter()
const route = useRoute()

// 响应式数据
const loading = ref(true)
const error = ref('')
const demand = ref(null)
const enterpriseInfo = ref(null)

// 获取需求详情
const loadDemandDetail = async () => {
  const demandId = route.params.demandId
  
  if (!demandId) {
    error.value = '需求ID不能为空'
    loading.value = false
    return
  }

  try {
    loading.value = true
    error.value = ''
    
    const response = await enterpriseApi.getDemandDetail(demandId)
    
    if (response.code === 200) {
      demand.value = response.data.demand
      enterpriseInfo.value = response.data.enterpriseInfo
    } else {
      error.value = response.error || response.message || '获取需求详情失败'
    }
  } catch (err) {
    if (err.response) {
      const status = err.response.status
      const errorData = err.response.data
      
      switch (status) {
        case 403:
          error.value = errorData?.error || '权限不足，无法查看此需求'
          break
        case 404:
          error.value = errorData?.error || '需求不存在'
          break
        case 500:
          error.value = errorData?.error || '服务器错误，请稍后重试'
          break
        default:
          error.value = errorData?.error || '获取需求详情失败'
      }
    } else {
      error.value = '网络连接失败，请检查网络设置'
    }
  } finally {
    loading.value = false
  }
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 获取需求类型文本
const getDemandTypeText = (type) => {
  const map = {
    'talent': '人才招聘',
    'trade': '贸易合作'
  }
  return map[type] || type
}

// 获取状态文本
const getStatusText = (status) => {
  const map = {
    'online': '已发布',
    'draft': '草稿',
    'pending_review': '待审核',
    'approved': '已通过',
    'rejected': '已驳回',
    'closed': '已下架',
    'expired': '已过期'
  }
  return map[status] || status
}

// 获取状态类型
const getStatusType = (status) => {
  const map = {
    'online': 'success',
    'draft': 'info',
    'pending_review': 'warning',
    'approved': 'success',
    'rejected': 'danger',
    'closed': 'info',
    'expired': 'info'
  }
  return map[status] || 'info'
}

// 获取认证状态文本
const getCertificationStatusText = (status) => {
  const map = {
    'unsubmitted': '未提交',
    'pendingreview': '审核中',
    'rejected': '未通过',
    'approved': '已认证'
  }
  return map[status] || status
}

// 获取认证状态类型
const getCertificationStatusType = (status) => {
  const map = {
    'unsubmitted': 'info',
    'pendingreview': 'warning',
    'rejected': 'danger',
    'approved': 'success'
  }
  return map[status] || 'info'
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 组件挂载
onMounted(() => {
  loadDemandDetail()
})
</script>

<style scoped>
.demand-detail-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
}

.page-header {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.loading-container {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.demand-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.status-badge {
  display: flex;
  align-items: center;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.label {
  font-weight: 500;
  color: #666;
  min-width: 80px;
  flex-shrink: 0;
}

.value {
  color: #333;
  flex: 1;
}

.description-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.description-item h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.rich-text {
  line-height: 1.6;
  color: #333;
}

.rich-text :deep(p) {
  margin: 0 0 10px 0;
}

.rich-text :deep(ul), .rich-text :deep(ol) {
  margin: 0 0 10px 0;
  padding-left: 20px;
}

.rejection-content {
  padding: 10px 0;
}

.error-container {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .demand-detail-page {
    padding: 10px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
</style> 